<template>
	<view class="content bg-default">
		<DishDetail class="bg-white" :name="dish.name" :type="dish.dishType" :desc="dish.description"
			:score="dish.score" :count="dish.scoreCount" :image="dish.imageUrl" />
		<view class="divider"></view>
		<view v-if="isEmployee">
			<!-- 评论 role > 0 才显示-->
			<CommentEditor v-if="canComment" @submit="handleCreateComment"></CommentEditor>
			<!-- 已评论 role > 0 才显示-->
			<view class="had-comment bg-white" v-else>
				<view class="comment-count">已评价{{ commentCount }}次</view>
				<view class="comment-checker" @click="navigateToMyCommentsPage">
					查看我的评价
				</view>
			</view>
		</view>
		<view class="had-comment bg-white" v-else>
			<view class="comment-count">游客不能评价哦</view>
			<view class="comment-checker" @click="navigateToLoginPage">
				登录
			</view>
		</view>

		<view class="space"></view>

		<CommentCard v-for="item in comments" :key="item.id" :score="item.score" :date="item.createdAt"
			:comment="item.comment" :liked-count="item.likeCount" :liked="item.liked"
			@liked="() => handleLiked(item.id)" />
	</view>
</template>

<script>
	import {
		useUserStore
	} from '@/stores/user.js';
	import {
		getDishByDishId
	} from '@/apis/dish.js';
	import {
		allowCommentByDishIdUserId,
		getCommentsByDishIdUserId,
		reqCreateComment,
		reqLikeComment
	} from '@/apis/comment.js';
	// 获取菜品，获取评论，是否可评论

	export default {
		data() {
			return {
				userId: '',
				dishId: '',
				userStore: useUserStore(),
				dish: {
					id: 1,
					name: ' ',
					typeName: ' ',
					dishTypeId: 0,
					description: ' ',
					imageUrl: '',
					score: 0,
					scoreCount: 0,
				},

				// 运行评论：一个菜一天只能评论一次
				canComment: false,
				// 以往评论次数
				commentCount: 0,

				comments: [],
			};
		},
		computed: {
			isEmployee() {
				// console.log('isEmployee', this.userStore?.role >= 1);
				return this.userStore?.role >= 1;
			},
			enabledComment() {},
		},
		onLoad(e) {
			this.dishId = parseInt(e.dishId);
			this.userId = useUserStore().id;
			// console.log('comments onLoad', this.dishId, this.userId);

			// if (this.dishId) {
			// 	this.initData();
			// }
		},
		onShow() {
			this.initData();
		},
		methods: {
			initData() {
				this.getDishDetail();
				this.allowComment();
				this.getComments();
			},
			// 允许评论
			allowComment() {
				allowCommentByDishIdUserId({
					userId: this.userId,
					dishId: this.dishId,
				}).then((res) => {
					this.canComment = res.data?.canComment || false;
					this.commentCount = res.data?.commentCount || 0;
				});
			},
			// 根据菜品ID获取所有评论
			getComments() {
				getCommentsByDishIdUserId({
					userId: this.userId,
					dishId: this.dishId,
				}).then((data) => {
					// console.log('根据菜品ID获取所有评论', data);
					this.comments = data;
				});
			},
			// 获取菜品ID菜品信息
			getDishDetail() {
				getDishByDishId(this.dishId).then((res) => {
					// console.log('getDishByDishId', res);
					this.dish = res.data;
				});
			},
			handleCreateComment(e) {
				// console.log('create comment', e);
				if (!this.userId || !this.dishId || !e.score) {
					uni.showToast({
						title: '还没有打分',
						icon: 'none',
					});
					return;
				}
				uni.showLoading({
					title: '',
				});
				reqCreateComment({
						userId: this.userId,
						dishId: this.dishId,
						score: e.score,
						comment: e.comment,
					})
					.then((res) => {
						// 评论成功，更新评论和状态
						this.allowComment();
						this.getComments();
					})
					.finally(() => {
						uni.hideLoading();
					});
			},
			handleLiked(commentId) {
				// console.log('点赞', commentId, this.userId);
				// return;
				reqLikeComment({
					userId: this.userId,
					commentId: commentId,
				}).then((res) => {
					// console.log('handleLiked', res);
					uni.showToast({
						title: res.message,
						icon: 'success',
					});
					// 更新评论
					setTimeout(() => {

						this.getComments();
					}, 200)
				});
			},
			navigateToMyCommentsPage() {
				uni.navigateTo({
					// 带上userId dishId
					url: '../../pages/my-comments/my-comments?dishId=' + this.dishId,
				});
			},
			navigateToLoginPage() {
				useUserStore().saveUser({
					id: -1,
					role: 0,
				});
				uni.redirectTo({
					url: '/pages/login/login',
				});
			},
		},
	};
</script>

<style scoped>
	.space {
		height: 24rpx;
	}

	.had-comment {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 16rpx;

		padding: 48rpx;
		/* font-size: 14px; */
	}

	.comment-count {
		color: #696969;
	}

	.comment-checker {
		color: #0062cf;
	}
</style>